<script setup lang="ts">
  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { institutionalUserList } from '@/api/auth'
  import { SIGN_ENUM, SIGN_ENUM_TEXT } from '@/utils/basicData'
  const projectInfoList = ref([])
  onLoad((options:any) => {
    getSignShow(options.campId)
  })

  const getSignShow = (campId:number) => {
    institutionalUserList({campId}).then(res => {
      if(res.code == 200){
        const dataList = JSON.parse(JSON.stringify(res.data))
        projectInfoList.value = dataList.map((item:any) => {
          item.collapse = false
          return item
        })
      }else{
        projectInfoList.value = []
      }
    }).catch(err => {
      projectInfoList.value = []
    })
  }
  const collapseClick = (data:any) => {
    data.collapse = !data.collapse
  }
</script>

<template>
  <view class="sign-up">
    <xx-title title="机构报名详情"/>
    <view class="sign-collapse" v-for="(item,index) in projectInfoList" :key="index">
      <view class="collapse-header" @click="collapseClick(item)" :style="{borderBottom:!item.collapse ? 'none' :'1rpx solid #F5F5F5'}">
        <view class="collapse-title">
          <view class="name">{{ item.eventsName }}</view>
        </view>
        <view class="collapse-icon" :class="{collapse:item.collapse}">
          <up-icon name="arrow-left" size="14"></up-icon>
        </view>
      </view>
      <view class="collapse-body" :class="{collapse:item.collapse}">
        <view class="collapse-item" v-for="(items,inx) in item.persons" :key="inx">
          <view class="collapse-info">
            <view class="collapse-name">{{items.name}}</view>
            <view class="card-id">身份证 {{items.idCard}}</view>
          </view>
          <view class="collapse-text" :class="SIGN_ENUM_TEXT[items.registrationOrderStatusEnum]">
           {{ SIGN_ENUM[items.registrationOrderStatusEnum] }}
          </view>
        </view>
      </view>
    </view>
  </view>

</template>

<style scoped lang="scss">
  .sign-up {
    width: 100%;
    min-height: 100vh;
    padding-top: 1rpx;
    background-color: #F5F5F5;
    .sign-collapse{
      margin: 32rpx;
      background-color: #FFFFFF;
      border-radius: 16rpx;
      padding: 0 32rpx;
      .collapse-header{
        padding: 24rpx 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .collapse-title{
          display: flex;
          align-items: center;
          font-size: 32rpx;
          .name{
            color: #21252E;
            margin-right: 10rpx;
            font-weight: 500;
          }
          .static{
            border-radius: 8rpx;
            padding: 4rpx 12rpx;
            font-size: 20rpx;
            color: #0DC56E;
            background: rgba(0, 178, 89, 0.1);
            box-sizing: border-box;
            border: 1px solid #0DC56E;
          }
          .danger{
            color: #fd1515;
            background: rgba(178, 42, 0, 0.1);
            border: 1px solid #fd1515;
          }
        }
        .collapse-icon{
          transition: all .3s;
          &.collapse{
            transform: rotate(-90deg);
          }
        }
      }
      .collapse-body{
        border-bottom: 1px solid #F5F5F5;
        height: 0;
        transition: all .3s;
        overflow: hidden;
        &:last-child{
          border-bottom: none;
        }
        &.collapse{
          height: auto;
        }
        .collapse-item{
          padding: 24rpx 0;
          display: flex;
          width: 100%;
          align-items: center;
          justify-content: center;
          border-bottom: 1rpx solid #F5F5F5;
          &:last-child{
            border-bottom: 0;
          }
          .collapse-info{
            width: calc(100% - 120rpx);
            .collapse-name{
              color: #21252E;
              font-size: 28rpx;
              font-weight: 500;
              margin-bottom: 4rpx;
            }
            .card-id{
              font-size: 24rpx;
              color: #818496;
            }
          }
          .collapse-text{
            text-align: right;
            width: 120rpx;
            font-size: 24rpx;
          }
        }
      }
    }
  }
  .valid-date-code{
    padding: 30rpx;
    .code-header{
      font-size: 32rpx;
      font-weight: 500;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color:#333333;
      padding-bottom: 16rpx;
      border-bottom: 1rpx solid #EBEBEB;
    }
    .code-body{
      height: 800rpx;
      padding:1rpx;
      overflow-y: auto;
      .motion-item{
        text-align: center;
        display: inline-block;
        padding: 10rpx 0;
        margin: 10rpx 20rpx 10rpx 0;
        font-size: 24rpx;
        width: 180rpx;
        border-radius: 8rpx;
        background-color: #EFF1F3;
        &:last-child{
          margin-right: 0;
        }
        &.check{
          background-color: #3086FE;
          color: #FFFFFF;
        }
      }
    }
  }
  .bottom-fixed{
    padding-top: 14px;
    .seizeASeat{
      height: 68rpx;
    }
  }
  .project-btn{
    width: 100%;
    position: absolute;
    box-sizing: border-box;
    left: 0;
    bottom: 0;
    padding-left: 28rpx;
    padding-right: 28rpx;
    border-top: 1px solid #F1F2F4;
    padding-top: 14rpx;
    background-color: #FFFFFF;
    .personal-registration{
      background: #92C75B;
      color: #FFFFFF;
      border-radius: 16rpx;
      width:100%;
      padding: 16rpx 0;
      letter-spacing: 2rpx;
      font-weight: 500;
      text-align: center;
      &.disabled{
        background-color: #E5E5E5;
        color:#818496;
      }
    }
  }
  .no-sure{
    color: #818496;
    font-size: 28rpx;
    text-align: center;
  }

</style>
